<template>
	<view>
		<uni-notice-bar
		      :text="notice"
		      scrollable
		      :speed="50"
		      showIcon
		      showClose
		    ></uni-notice-bar>
		<!-- 主页面板块 -->
		<view class="tea-mu">
			 <!-- 选项卡 -->
			<view class="page"> 
				 <!-- 使用 swiper 配合 滑动切换 -->
				<swiper style="height: 330px;" @change='scollSwiper' :current='current' v-if="current == 0">
					<swiper-item v-for="(item,index) in items" :key='index' >
						 <!-- 使用 scroll-view 来滚动内容区域 -->
						<view v-if="current == 0">
							<view class="header" v-bind:class="{'status':isH5Plus}">
								<view class="userinfo">
									<view class="face"><image :src="userinfo.face"></image></view>
									<view class="info">
										<view class="username">{{userinfo.username}}</view>
										<view class="integral">积分:{{userinfo.integral}}</view>
									</view>
								</view>
							</view>
							
							<view style="margin-top: 5px; height:230px;">
								<tabControl :current="current_1" :values="items_1" bgc="#fff"  :scrollFlag='true' 
									:isEqually='true' @clickItem="onClickItem_1"></tabControl>
								 <!-- 使用 swiper 配合 滑动切换 -->
								<swiper class="swiper"  @change='scollSwiper_1' :current='current_1' style="height: 400rpx;">
									<swiper-item v-for="(item,index_1) in items_1" :key='index_1' >
										 <!-- 使用 scroll-view 来滚动内容区域 -->
										<!-- <scroll-view scroll-y="true" style="height: 100%;">{{ item }}</scroll-view> -->
										
										<!-- 轮播图 -->
										<view style="margin-top: 5px;" v-if="current_1 == 0">
											 <carousel :img-list="imgList" class="lunbo" url-key="url"
											 @selected="selectedBanner"/>
										</view>
										
										<!-- 特权部分 -->
										<view class="NavBox marginBottom-Theme-1" v-if="current_1 == 1" 
											style="margin-top: 5px; margin-bottom: 20px; height: 160px;">
											<shortcutNav style="padding: 0upx 20upx 20upx 20upx;" 
											:list="shortcutNavList_two" :hengNumber="2" :boxshadow="false"
											 :borderRadius="false" @toDetailPage="toDetailPage"></shortcutNav>
										</view>
										
										
										<!-- 我的茶树 -->
										<view v-if="current_1 == 2">
											<div class="test-component" >
											    <hm-balance-card :options="options" 
													style="border-radius: 10px; background-color: #ffffff; height: 198px;">
												</hm-balance-card>
											  </div>
										</view>
										
									</swiper-item>
								</swiper>
							</view>
								
						</view>
						
					</swiper-item>
				</swiper>
				<!-- 我的故事 -->
				<view v-if="current == 1" style="padding-top: 0px;">
					<view class="container jiangqie-page-view">
						<view class="jiangqie-page-head">
							<view class="jiangqie-page-title">
								<text>{{post.title}}</text>
								<view class="jiangqie-page-cmt">
									<view class="jiangqie-page-cmt-info">
										<image src="/static/images/ctm2.png" mode="widthFix" class="jiangqie-page-icon"></image>
										{{post.views}}
									</view>
									<text>{{post.time}}</text>
									<text v-for="(cat, cati) in post.cats" :key="cati" class="category">{{cat.name}}</text>
								</view>
							</view>
						</view>
						
						<!-- #ifdef MP-WEIXIN -->
						<view v-if="official" class="jiangqie-official-mod">
							<official-account></official-account>
						</view>
						<!-- #endif -->
						
						<view class="jiangqie-page-body">
							<mp-html :content="article"></mp-html>
							<view class="jiangqie-page-body-end">
								<text>- The End -</text>
							</view>
						</view>
					</view>
					
				</view>
				
				<!-- 精选图文部分 -->
				<view  v-if="current == 0">
					<articleList :list="list" />
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	import carousel from '@/components/vear-carousel/vear-carousel.vue';
	import articleList from '@/components/article/list.vue';
	import mpHtml from '@/components/mp-html/mp-html';
	import shortcutNav from '@/components/ay-shortcutNav/shortcutNav.vue';
	import HmBalanceCard from '@/components/hm-balance-card/index.vue'
	
	export default {
		 components:{
			 tabControl,
			 carousel,
			 articleList,
			 mpHtml,
			 shortcutNav,
			 HmBalanceCard 
		},
		data() {
			return {
				//#ifdef APP-PLUS
				isH5Plus:true,
				//#endif
				//#ifndef APP-PLUS
				isH5Plus:false,
				//#endif
				notice: '好消息！成为会员免费获取精美礼品一份！',
				items: ['精选', '看故事'],
				items_1: ['内容特权', '功能特权','我的茶树'],
				current: 0,
				current_1: 0,
				test: '',
				test_1: '',
				userinfo:{},
				
				// 轮播
				imgList: [{
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171101%2F97824c3d8d20465f9a829ed263880e29.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627733684&t=32f5d8c8ab425dba5fd51de40d0e24be',
					id: 1
				},{
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F9LfHW3lkEHwCrn2Yaerf42Njc4W4ApwmxljPUyo0DcTdt1552728736284.jpg&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627733708&t=86cb5b677efe19d04698ec0151e4e36d',
					id: 2
				},{
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fq_70%2Cc_zoom%2Cw_640%2Fimages%2F20190410%2Feced2567979a40e7b91b86de7f9e239a.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627733735&t=2b438fd4e26264069f2445478321445c',
					id: 3
				},{
					url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fd0c8a786c9177f3efd4cdefe7bcf3bc79e3d56cc.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627733758&t=a70290bcd33cd4de3763662c6473843e',
					id: 4
				},],
				
				list: [{
					comment_count: 0,
					create_time: "2020-12-20",
					id: 12856,
					photo_url: "https://good-tea.oss-cn-beijing.aliyuncs.com/good-tea/puer.jpg",
					read: 9239,
					source: "精选茶叶",
					title: "精选茶叶，精选茶叶，精选茶叶，精选茶叶",
				},
				{
					comment_count: 0,
					create_time: "2020-12-20",
					id: 12856,
					photo_url: "https://good-tea.oss-cn-beijing.aliyuncs.com/good-tea/chawenhua.jpg",
					read: 9239,
					source: "熟茶普洱",
					title: "熟茶普洱，熟茶普洱，熟茶普洱",
				}],
				
				title: '',
				value: '',
				
				official: false,
				article:'',
				post: {
					title: "神农尝茶的传说",
					views: 1812,
					time: "2021-06-10",
					cats: [
						{id: 8,
						name: "茶故事资讯组"}
					]
				},
				
				//特权部分
				shortcutNavList_two: [{
				    img: 'https://good-tea.oss-cn-beijing.aliyuncs.com/good-tea/0yuanpingcha.jpeg',
				    name: '0元品茶',
				    key: '0元品茶',
				}, {
				    img: 'https://good-tea.oss-cn-beijing.aliyuncs.com/good-tea/pingcha.jpeg',
				    name: '免费鉴茶',
				    key: '免费鉴茶',
				}, {
				    img: 'https://good-tea.oss-cn-beijing.aliyuncs.com/good-tea/chashan.webp',
				    name: '茶山旅游',
				    key: '茶山旅游',
				}, {
				    img: 'https://good-tea.oss-cn-beijing.aliyuncs.com/good-tea/vr.jpeg',
				    name: '5G VR体验',
				    key: '5G VR体验',
				}],
				
				/* 我的故事 */
				 options: {
				  layer: "/static/wenli.jpg",
				  bd: '茶树状态：健康',
				  title: '好友动态排行榜:',
				  main: '您的朋友xxx给您的树浇了水',
				  date: '日期',
				  word: '12/24',
				  cvv: 'CVV',
				  num: '235',
				  treePic: "/static/tea.png"
				}
			}
		},
		onLoad() {
			let that = this;
			this.init();
			
			this.article = "<p><img  src='/static/shennong.jpg'/></p> " + 
					  '<p>很早以前，中国就有“神农尝百草，日遇七十二毒，得茶而解之”的传说。说的是神农有一个水晶般透明的肚子，吃下什么东西，人们都可以从他的胃肠里看得清清楚楚。那时候的人，吃东西都是生吞活剥的，因此经常闹病。神农为了解除人们的疾苦，就把看到的植物都尝试一遍，看看这些植物在肚子里的变化，判断哪些无毒哪些有毒。当他尝到一种开白花的常绿树嫩叶时，就在肚子里从上到下，从下到上，到处流动洗涤，好似在肚子里检查什么，于是他就把这种绿叶称为“查”。以后人们又把“查”叫成“茶”。神农长年累月地爬山涉水，尝试百草，每天都得中毒几次，全靠茶来解救。但是最后一次，神农来不及吃茶叶，还是被毒草毒死了。据说，那时候他见到一种开着黄色小花的小草，那花萼在一张一合地动着，他感到好奇，就把叶子放在嘴里慢慢咀嚼。一会儿，他感到肚子很难爱，还没来得及吃茶叶，肚肠就一节一节地断开了，原来是中了断肠草的毒。后人为了崇敬、纪念农业和医学发明者的功绩，就世代传颂着这样一个神农尝百草的故事。</p>' + 
					  '<p>丰富的内容变现方式及运营工具，商城、广告、内容带货、认证体系、资源下载、投票、PK、消息等，助力每一位创业者实现精细化运营及成功。</p>'
		},
		methods: {
			 onClickItem(val) {
			 	this.current = val.currentIndex
			 	console.log(this.current)
				
				if(this.current == 0){
					this.test = "0---test"
				}
				if(this.current == 1){
					this.test = "1---test"
				}
				if(this.current == 2){
					this.test = "2---test"
				}
			 },
			 scollSwiper(e){
			 	this.current = e.target.current
			 },
			 
			 onClickItem_1(val) {
			 	this.current_1 = val.currentIndex
			 	console.log(this.current)
			 				
				if(this.current_1 == 0){
					this.test_1 = "内容特权"
				}
				if(this.current_1 == 1){
					this.test_1 = "功能特权"
				}
				if(this.current_1 == 2){
					this.test_1 = "我的茶树"
				}
			 },
			 scollSwiper_1(e){
			 	this.current_1 = e.target.current
			 },
			 
			 init() {
			 	//用户信息
			 	this.userinfo={
			 		face:'/static/face.jpeg',
			 		username:"VIP会员10240",
			 		integral:"1435"
			 	}		
			 },
			 
			 selectedBanner(item, index) {
			 	console.log('🥒', item, index)
			 },
			 
			 toDetailPage(e) {
				console.log(e)
				console.log("点击了图片")
			},
			
			onClick: function(e) {
			   console.log('onClick');
			 }
		}
	}
</script>

<style lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.tea-mu{
		width: 100%;
		height: 2000px;
	}
	page{
	    height: 100%;
	}
	.page{
	    height: 100%;
		// position: relative;
	}
	
	.header{
		&.status{padding-top:var(--status-bar-height);}
		background-color:#bddebe;width:96%;height:30vw;padding:0 4%;display:flex;align-items:center;
		margin-left: 8px; margin-right: 8px;border-radius: 10px;margin-top: 10px;
		.userinfo{
			width:90%;display:flex;
			.face{flex-shrink:0;width:15vw;height:15vw;
				image{width:100%;height:100%;border-radius:100%}
			}
			.info{
				display:flex;flex-flow:wrap;padding-left:30upx;
				.username{width:100%;color:#444444;font-size:40upx}
				.integral{display:flex;align-items:center;padding:0 20upx;height:40upx;color:#fff;background-color:rgba(0,0,0,0.1);border-radius:20upx;font-size:24upx}
			}
		}
		.setting{
			flex-shrink:0;width:6vw;height:6vw;
			image{width:100%;height:100%}
		}
	}
	.lunbo{
		position: relative;
	}
	

	button {
		margin: 0;
		padding: 0;
		border-radius: 0;
		background-color: transparent;
	}
	
	.jiangqie-page-view {
		padding: 0rpx;
	}
	
	.jiangqie-page-head {
		position: sticky;
		overflow: hidden;
		border-bottom: 4rpx solid #F3F3F3;
	}
	
	.jiangqie-page-title {
		width: 100%;
	}
	
	.jiangqie-page-title text {
		display: block;
		line-height: 46rpx;
		padding: 50rpx 30rpx 0;
		color: #333;
		font-size: 36rpx;
		font-weight: 500;
	}
	
	.jiangqie-page-cmt {
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx 40rpx 0 0;
		background: #FFF;
		padding: 0 30rpx;
	}
	
	.jiangqie-page-cmt-info {
		float: right;
		font-size: 24rpx;
		font-weight: 200;
		color: #999;
	}
	
	.jiangqie-page-icon {
		height: 32rpx;
		width: 32rpx;
		margin-right: 10rpx;
		vertical-align: middle;
		margin-bottom: 2rpx;
	}
	
	.jiangqie-page-cmt text {
		font-size: 24rpx;
		font-weight: 200;
		color: #999;
		display: inline-block;
		line-height: 80rpx;
		padding: 0rpx;
	}
	
	.jiangqie-page-cmt .category {
		margin-left: 20rpx;
	}
	
	.jiangqie-page-title-img {
		position: relative;
		width: 100%;
	}
	
	.jiangqie-page-body {
		padding: 30rpx 50rpx;
		background: #FFF;
		line-height: 2rem;
		font-weight: 300;
		font-size: 30rpx;
	}
	
	.wxParse-p {
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #333333;
		line-height: 2rem;
		font-weight: 300;
	}
	
	.jiangqie-page-body-end {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 20rpx;
		color: #CCC;
		text-align: center
	}
	
	.jiangqie-page-body-tag {
		padding: 20rpx 0;
		overflow: hidden;
		border-bottom: 1rpx solid #EEE;
	}
	
	.jiangqie-page-body-tag text {
		float: left;
		padding: 4rpx 22rpx 6rpx 22rpx;
		vertical-align: middle;
		background: #F6F6F6;
		border-radius: 40rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-weight: 300;
		font-size: 22rpx;
		color: #666;
	}
	
	.jiangqie-page-body-banner {
		height: 160rpx;
		width: 690rpx;
		overflow: hidden;
		border-radius: 20rpx;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.2);
		margin: 20rpx 0;
	}
	
	.jiangqie-page-body-banner image {
		width: 100%;
	}
	
	.jiangqie-page-cmtbox {
		padding: 20rpx 30rpx 80rpx;
		border-top: 16rpx solid #F3F3F3;
		background: #FFF;
		clear: left;
	}
	
	.jiangqie-page-cmt-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		padding: 10rpx 0 16rpx;
	}
	
	.jiangqie-page-cmt-title text {
		font-size: 20rpx;
		font-weight: 200;
		color: #999;
		padding: 6rpx 16rpx;
		border-radius: 30rpx;
		background: #F6F6F6;
		margin-left: 30rpx;
	}
	
	.jiangqie-page-cmt-content {
		padding: 16rpx 0;
		padding-left: 80rpx;
		border-top: 1rpx solid #EEE;
		overflow: hidden;
	}
	
	.jiangqie-page-cmt-avatar {
		float: left;
		margin-left: -80rpx;
		height: 64rpx;
		width: 64rpx;
	}
	
	.jiangqie-page-cmt-avatar image {
		height: 64rpx;
		width: 64rpx;
		border-radius: 64rpx;
		overflow: hidden;
	}
	
	.jiangqie-page-cmt-head {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
	}
	
	.jiangqie-page-cmt-time {
		font-size: 20rpx;
		font-weight: 200;
		color: #888;
		margin-left: 20rpx;
	}
	
	.jiangqie-page-cmt-text {
		padding: 10rpx 0;
	}
	
	.jiangqie-page-cmt-text-world {
		font-size: 26rpx;
		font-weight: 300;
		color: #444;
	}
	
	.jiangqie-page-cmt-replay {
		margin-top: 20rpx;
		border-radius: 30rpx;
		padding: 0 20rpx;
		background: #F6F6F6;
	}
	
	.jiangqie-page-cmt-replay-box {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEE;
	}
	
	.jiangqie-page-cmt-replay-box:last-child {
		border-bottom: none;
	}
	
	.jiangqie-page-cmt-replay-nametime {
		padding-bottom: 10rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333;
	}
	
	.jiangqie-page-cmt-replay-time {
		font-size: 20rpx;
		font-weight: 200;
		color: #BBB;
		margin-left: 20rpx;
	}
	
	.jiangqie-page-cmt-replay-world {
		font-size: 24rpx;
		font-weight: 300;
		color: #444;
	}
	
	/**/
	
	.jiangqie-page-laud {
		overflow: hidden;
		border-bottom: 1rpx solid #EEE;
	}
	
	.jiangqie-page-laud-contrl {
		padding: 40rpx 20rpx 10rpx;
		overflow: hidden;
	}
	
	.jiangqie-page-laud-btn {
		font-size: 14px;
		text-align: center;
		float: left;
		margin-left: 40rpx;
		border-radius: 80rpx;
		padding: 5rpx 40rpx 7rpx;
		width: 180rpx;
		border: 1rpx solid #CCCCCC;
		line-height: 1.8rem;
	}
	
	.jiangqie-page-laud-btn image {
		height: 36rpx;
		width: 36rpx;
		margin-right: 12rpx;
		vertical-align: text-bottom;
	}
	
	.jiangqie-page-laud-btn text {
		font-size: 26rpx;
		font-weight: 200;
		color: #999;
	}
	
	.jiangqie-page-laud-list {
		padding: 20rpx 40rpx 10rpx;
	}
	
	.jiangqie-page-laud-list-title {
		text-align: center;
		padding: 20rpx;
		font-size: 22rpx;
		color: #BBB;
		font-weight: 200;
	}
	
	.jiangqie-page-laud-list-block {
		padding: 20rpx;
		overflow: hidden;
		text-align: center;
	}
	
	.jiangqie-page-laud-list-block image {
		height: 64rpx;
		width: 64rpx;
		margin-right: 24rpx;
		border-radius: 96rpx;
	}
	
	/**/
	.jiangqie-operation {
		width: 100%;
		height: 100rpx;
		overflow: hidden;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999;
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.jiangqie-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}
	
	.jiangqie-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	.jiangqie-operation-left {
		display: flex;
		align-items: center;
	}
	
	.jiangqie-operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		position: relative;
	}
	
	.jiangqie-operation-item image {
		height: 42rpx;
		width: 42rpx;
	}
	
	.jiangqie-operation-item text {
		position: absolute;
		right: 10rpx;
		background: #FFF;
		font-size: 20rpx;
		top: -10rpx;
		padding: 4rpx;
	}
	
	.jiangqie-operation-right {
		height: 100rpx;
		box-sizing: border-box;
		padding-top: 0;
	}
	
	.jiangqie-badge-class {
		color: #5677fc !important;
		position: absolute;
		top: -6rpx;
		padding: 2px 4px !important;
	}
	
	.jiangqie-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.jiangqie-btn-comment {
		height: 64rpx;
		width: 84%;
		background: #ededed;
		color: #999;
		border-radius: 16rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
		padding-top: 0;
		margin-left: 30rpx;
	}
	
	.jiangqie-col-7 {
		width: 58.33333333%;
	}
	
	.jiangqie-col-5 {
		width: 41.66666667%;
	}
	
	.jiangqie-share-btn {
		display: block;
		background: none;
		margin: 0;
		padding: 0;
		border: none;
	}
	
	.comment-action {
		margin-left: 20rpx;
	}
	
	
	/* 评论框 -- start --*/
	
	.textareacontent {
		position: fixed;
		top: 350rpx;
		width: 100%;
		height: 1200rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		background-color: #fff;
		z-index: 10;
	}
	
	.textareacontent .textheaders {
		width: 100%;
		height: 96rpx;
		border-bottom: 1rpx solid #eaeaea;
	}
	
	.textareacontent .textheaders .cancel {
		color: #333;
		font-size: 32rpx;
		line-height: 96rpx;
		margin-left: 32rpx;
		float: left;
	}
	
	.textareacontent .textheaders .publish {
		color: #3ec382;
		font-size: 32rpx;
		line-height: 96rpx;
		margin-right: 32rpx;
		float: right;
	}
	
	.textareaBox {
		height: 360rpx;
		position: relative;
	}
	
	.textNum {
		position: absolute;
		width: 686rpx;
		font-size: 26rpx;
		color: #999;
		margin-left: 32rpx;
		margin-right: 32rpx;
		top: 10rpx;
		text-align: right;
	}
	
	.textareacontent .textareaInput {
		width: 686rpx;
		padding: 32rpx 32rpx 42rpx 32rpx;
		height: 286rpx;
		font-size: 34rpx;
		line-height: 65rpx;
		z-index: 0;
	}
	
	.pagemake {
		background-color: #000;
		opacity: 0.8;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		/*
		   #ifdef  H5  
		 */
		/* top: calc(88rpx + constant(safe-area-inset-top));
		top: calc(88rpx + env(safe-area-inset-top)); */
		/*
		   #endif  
		 */
	}
	
	/* 评论框 -- end --*/
	
	.jiangqie-page-body {
		overflow: hidden;
	}
	
	button.jiangqie-page-laud-btn {
		box-sizing: content-box;
		line-height: inherit;
		line-height: 1.8rem;
	}
	
	.jiangqie-goback-btn {
		height: 96rpx;
		width: 96rpx;
		position: fixed;
		right: 40rpx;
		bottom: 200rpx;
	}
	
	.jiangqie-goback-btn button {
		background: none;
	}
	
	.jiangqie-goback-btn image {
		height: 96rpx;
		width: 96rpx;
	}
	
	.jiangqie-official-mod {
		padding: 10rpx 0;
	}
	
	.NavBox {
	       width: 94%;
	       margin: 0upx 20upx;
		   height: 92%;
	   }
	.marginBottom-Theme {
	    margin-bottom: 20upx;
		box-shadow: 2rpx 10rpx 25rpx rgba($color: #a8a8a8, $alpha: 1.0);
		border-radius: 50rpx;
		position: absolute;
		// top: 160rpx;
	}
	.marginBottom-Theme-1 {
	    margin-bottom: 20upx;
		box-shadow: 2rpx 2rpx 20rpx rgba($color: #a8a8a8, $alpha: 0.5);
		border-radius: 50rpx;
		position: absolute;
		// top: 160rpx;
	}
</style>
